<template>
  <div>
    <h1>老二个组件</h1>
    <h1>state:{{ $store.state.count }}</h1>
    <h1>getters:{{ $store.getters.gcount }}</h1>
    <hr />
    <h1>{{ cname }}</h1>
    <h1>{{ gcount }}</h1>
    <h1>{{ twoData }}</h1>
    <button @click="changeCount(20)">点击</button>
    <button @click="countAction(100)">点击触发actions</button>
    <button @click="par">调用父组件的数据和方法</button>
    <hr />
    <two-com></two-com>
  </div>
</template>
<script>
import twoCom from './twoCom.vue'
// 辅助函数法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
// mapState 和mapGetters 可以vuex的state和getters注入到本组件的计算属性
//mapMutations和mapActions 可以将vuex的Mutations和Actions 的方法注入到methods使用
export default {
  data () {
    return {
      twoData: '老六烧烤'
    }
  },
  components: { twoCom },
  computed: {
    ...mapState(['count', 'cname']),
    ...mapGetters(['gcount']),
    counts () {
      return this.$store.state.count
    }
  },
  methods: {
    ...mapMutations(['changeCount']),
    ...mapActions(['countAction']),
    par () {
      console.log(this.$parent)
      // 改变父组件的数据
      this.$parent.fdata = '今天星期六'
      // 调用父组件的方法 传递数据
      this.$parent.run('邓超')
    },
    say () {
      this.changeCount(20)
    }
  }
}
</script>
<style lang="less"></style>
